<DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="../res/css/mawTable.css"/>
		 
		<!--
		<link type="text/css" href="js/datebox/date.min.css" rel="stylesheet" /> 
		
		<script type="text/javascript" charset="utf-8" src="../plugins/jq.scroller.js"></script> 
		--> 
		
		<style>
			body{color:black}	
		</style>
	</head>
	<body>
		
		<div id="jQUi">
		
			<div  id="transition" class="panel" scrolling="no">

				<!--
				<div>
					<ul>
					<li><a href="#transition1" data-transition="slide">Slide</a></li>
					<li><a href="#transition2" data-transition="up">Slide Up</a></li>
					<li><a href="#transition3" data-transition="down">Slide Down</a></li>
					<li><a href="#transition4" data-transition="pop">Pop</a></li>
					<li><a href="#transition5" data-transition="flip" class="">Flip</a></li>
					<li><a href="#transition6" data-transition="fade">Fade</a></li>
					<li><a href="#Swipe" data-transition="fade">Swipe</a></li>
					
					</ul>
				</div>
				
				-->
				
				
				
				
				<br/>
				<br/>
				<br/>
				
				<!--carouse start  --> 
				<style>
				.carousel_paging2 {
					border-radius: 10px;
					
					background: #ccc;
					width: 10px;
					height: 10px;
					float: left;
				}
		
				.carousel_paging2_selected {
					border-radius: 10px;
					
					background: #000;
					width: 10px;
					height: 10px;
					float: left;
				}
		
				.spacer {
					width: 10px;
					float: left;
				}
		
				.carousel_content {
					-webkit-transform: translate3d(0, 0, 0);
				}
				</style>
				<script>
				 var carousel,carousel2;
					function init_carousel() {
						carousel=jq("#carousel").carousel({
							pagingDiv: "carousel_dots",
							pagingCssName: "carousel_paging2",
							pagingCssNameSelected: "carousel_paging2_selected",
							preventDefaults:false
						});
					  
					}
					window.addEventListener("load", init_carousel, false);
				
				</script>
				carousel:
				<div id="carousel_dots" style="text-align: center; margin:auto; clear: both; position: relative; top: 40%; z-index: 200">
				</div>
				<div id="carousel" style="display:block;height:200px;width:200px;">
						<div style="background: yellow;">
							<a href="javascript:alert('test');">
									I'm a horizontal carousel
								</a>
							</div>
						<div style="background: green;"></div>
						<div style="background: blue;"></div>
						<div style="background: pink;"></div>
				</div>
			<!--carouse end  -->
				
			<!--hscroller start  -->	
		 
			<div style="clear:both;"></div>
			<div style="overflow:hidden;" > 
				<div id="vscroller" style="height:150px;">
					<div id="hscroller1" style="width:800px;overflow:hidden;">
						<table class="table_result" id="table1"> 
                              <thead>
                                <tr>
																	<td>序号</td>
                                  <td>中文船名</td>
                                  <td>英文船名</td>
                                  <td>出口航次</td>
                                  <td>船公司</td>
                                  <td>内外贸</td>
                                  <td>进箱开始时间</td>
                                  <td>进箱结束时间</td>
                                  <td>港口代码（参考)</td>
                                  			
																</tr>
                              </thead>
                              <tbody>
                                  <tr>
                                      <td>1</td>
                                      <td>东进维纳斯</td>
                                      <td>DONGJIN VENUS</td>
                                      <td>1218E</td>
                                      <td>兴亚海运</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"   id="HLCJV6" type="button" onclick="detail()"></td>
                                     
                                      
                                  </tr>
                                  <tr>
                                      <td>2</td>
                                      <td>兴亚釜山</td>
                                      <td>KWATER</td>
                                      <td>0086N</td>
                                      <td>兴亚海运</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>3</td>
                                      <td>东进维纳斯</td>
                                      <td>DONGJIN VENUS</td>
                                      <td>1218E</td>
                                      <td>东进商船</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>4</td>
                                      <td>兴亚釜山</td>
                                      <td>KWATER</td>
                                      <td>0086N</td>
                                      <td>兴亚海运</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>2</td>
                                      <td>兴亚釜山</td>
                                      <td>KWATER</td>
                                      <td>0086N</td>
                                      <td>兴亚海运</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>3</td>
                                      <td>东进维纳斯</td>
                                      <td>DONGJIN VENUS</td>
                                      <td>1218E</td>
                                      <td>东进商船</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>4</td>
                                      <td>兴亚釜山</td>
                                      <td>KWATER</td>
                                      <td>0086N</td>
                                      <td>兴亚海运</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>2</td>
                                      <td>兴亚釜山</td>
                                      <td>KWATER</td>
                                      <td>0086N</td>
                                      <td>兴亚海运</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>3</td>
                                      <td>东进维纳斯</td>
                                      <td>DONGJIN VENUS</td>
                                      <td>1218E</td>
                                      <td>东进商船</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                                  <tr>
                                      <td>4</td>
                                      <td>兴亚釜山</td>
                                      <td>KWATER</td>
                                      <td>0086N</td>
                                      <td>兴亚海运</td>
                                      <td>W</td>
                                      <td>2012-01-10 10:00:01</td>
                                      <td>2012-01-14 20:00:01</td>
                                      <td><input value="详细信息" name="detail" class="detail"  id="HLCJV6" type="button"  onclick="detail()"></td>
                                  </tr>
                              </tbody>
                          </table>
					</div>
				</div>	 
			</div>
			
			<div style="clear:both;"></div>
			<!-- hscroller end -->	
			
			<br/>
			<br/>
			
			<div style="clear:both;"></div>
			
		 	 
			<br/>
			<br/>
			<br/>
			<br/> 
			
			日期控件：
			<div>
				<select name="dateContainer" id="dateContainer" style="display:none"></select>	
				<input type="datetime-local" readonly name="startTime" id="startTime"  class="w120px ui_input_text"/> 
								- 
				<input type="datetime-local" name="endTime" id="endTime"   class="w120px ui_input_text"/>		
			</div>
			  
			
				 
			  
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>
			
				
		  </div>
			 
			
			<!--
			<div title="Slide" id="transition1" class="panel" data-footer='footerui' style="padding-left:0px">
			Slide
			</div>
			<div title="Slide Up" id="transition2" class="panel" data-footer='footerui' style="padding-left:0px">
				Slide Up
			</div>
			<div title="Slide Down" id="transition3" class="panel splashscreen" data-footer='footerui' style="padding-left:0px">
			Slide Dow
			</div>
			<div title="Pop" id="transition4" class="panel" data-footer='footerui' style="padding-left:0px">
				Pop
			</div>
			<div title="Flip" id="transition5" class="panel" data-footer='footerui' style="padding-left:0px">
			Flip
			</div>
			<div title="Fade" id="transition6" class="panel" data-footer='footerui' style="padding-left:0px">
			Fade
			</div>
			
			-->
			
			
			<div title="Swipe" class="panel" id="Swipe" scrolling="no">
				<style>
					.result {position:absolute;left:100px;}
				</style>
				<script>
					/* This function runs once the page is loaded, but appMobi is not yet active */
					var init_swipe = function () {
					jq("#swiper").swipeListener({
							vthreshold: 30,
							hthreshold: 50,
							callBack: function (dir) {
								debugMsg(dir)
							}
						});
					};
					window.addEventListener("load", init_swipe, false);
		
					function debugMsg(direction) {
						document.getElementById("debug").innerHTML =
						"Up: <span class='result'>" + direction.up + "</span><br />" +
						"Down: <span class='result'>" + direction.down + "</span><br />" +
						"Left: <span class='result'>" + direction.left + "</span><br />" +
						"Right: <span class='result'>" + direction.right + "</span><br />";
					}
				</script>
				Swipe Below
				<div id="swiper"
					style="height: 200px; width: 95%; background:#ccc"></div>
				<div id="debug"></div>
			</div>
			
			
			
			 
		</div>
		
		
	<script type="text/javascript" charset="utf-8" src="../jq.mobi.js"></script> 
		
	<script type="text/javascript" charset="utf-8" src="../plugins/jq.swipe.js"></script> 
	
 	<script type="text/javascript" charset="utf-8" src="../plugins/jq.carousel.js"></script> 
	
<!--
	<script type="text/javascript" charset="utf-8" src="../ui/jq.ui.js"></script> 
-->

	<script type="text/javascript" src="../plugins/jq.scroller.js"></script> 
	<script>
	
	if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
		var script=document.createElement("script");
		script.src="../touch.js";
		var tag=$("head").append(script);
		$.os.android=true; //let's make it run like an android device
		$.os.desktop=true;
	}
	
	 
  /* This function runs once the page is loaded, but appMobi is not yet active */
	var webRoot="../kitchensink/";
	/**
	 
	$.ui.autoLaunch=false;
    var init = function(){
	   $.ui.backButtonText="Back";  
	   window.setTimeout(function(){$.ui.launch();},50);
       //$.ui.removeFooterMenu(); This would remove the bottom nav menu
    };
    document.addEventListener("DOMContentLoaded",init,false);  
	$.ui.ready(function(){console.log('ui.ready');});
 **/
  var preventDefaultScroll = function(event) {
      event.preventDefault();
      window.scroll(0,0);
      return false;
  };

	document.addEventListener('touchmove', preventDefaultScroll, false);
   
  

  /* This code is used to run as soon as appMobi activates */
 
  var onDeviceReady=function(){
	AppMobi.device.setRotateOrientation("portrait");
      AppMobi.device.setAutoRotate(false);
	webRoot=AppMobi.webRoot+"/";
    //hide splash screen
    AppMobi.device.hideSplashScreen();	
	
  };
  document.addEventListener("appMobi.device.ready",onDeviceReady,false);    

	</script>
	
	
	<script type="text/javascript" src="../plugins/mawScroller.js"></script> 
	
	
	<script>
			var hoptions = {
		  	verticalScroll:false,
		  	horizontalScroll:true,
		  	scrollBars:true
		   
		  };
			var voptions = {
		  	verticalScroll:true,
		  	horizontalScroll:false,
		  	scrollBars:true
		   
		  };
	 		//var vscroller = jq("#vscroller").scroller(voptions);
	 		
			var scroller = jq("#hscroller1").scroller(hoptions);	
			jq("#hscroller1").fixHScroll();
		
	</script>
	
	
	
	 
	<!--
	
	<script type="text/javascript" charset="utf-8" src="jquery.js"></script>
	<script type="text/javascript" src="js/datebox/datetime.js"></script>
	<script>
		$(function () {
      var curr = new Date().getFullYear();
      var opt = {
          'date': {
              preset: 'date'
          },
          'datetime': {
              preset: 'datetime',
              minDate: new Date(2010, 1, 1, 0, 0),
              maxDate: new Date(2014, 7, 30, 15, 44),
              stepMinute: 5
          },
          'time': {
              preset: 'time'
          },
          'credit': {
              preset: 'date',
              dateOrder: 'yymm',
              dateFormat: 'yy/mm',
              startYear: curr,
              endYear: curr + 10,
              width: 100
          },
          'btn': {
              preset: 'date',
              showOnFocus: false
          },
          'inline': {
              preset: 'time',
              display: 'inline',
              timeFormat: 'HH:ii:ss',
              timeWheels: 'HHiiss'
          }
      }

      $('select').scroller({ preset: 'select' }).on('change', function() {
        $('#startTime').val('').scroller('destroy').scroller(
          	$.extend(
          		opt['datetime'],
          		{ 
          			theme:'default',
          			mode: 'scroller'
          		}
          	)
       	);
       	$('#endTime').val('').scroller('destroy').scroller(
          	$.extend(
          		opt['datetime'],
          		{ 
          			theme:'default',
          			mode: 'scroller'
          		}
          	)
       	);
          
      });

			 
      $('#dateContainer').trigger('change');
		
  });	
	</script>
	
	-->
	
	
	
	
	 
		
	
	
	</body> 
</html>	